Дочірні селектори

Internet Explorer/Internet Explorer

Netscape/Netscape

Opera/Opera

Safari/Safari

Firefox/Firefox

6.0

7.0

8.0

8.0

9.0

8.0

9.2

9.5

1.3

2.0

3.1

1.5

2.0

3.0

Ні

Помилки

Так

Так

Так

Так

Так

Так

Так

Так

Так

Так

Так

Так

Опис

Дочорнимо називається елемент, який безпосередньо розташовується усередині батьківського елементу. Який елемент виступає батьком, а який його нащадком легко з'ясувати за допомогою дерева елементів - так називається структура стосунків тегів документу між собою (мал. 1).

Рис. 1

Мал. 1. Дерево елементів

На мал. 1 в зручному виді представлена вкладеність елементів і їх ієрархія. Тут дочірнім елементом по відношенню до тега <DIV> виступає тег <P>. В той же час тег <STRONG> не являється дочорнимо для тега <DIV>, оскільки він розташований в контейнері <P>.

Синтаксис

E > F { Опис правил стилю }

Стиль застосовується до елементу F, тільки коли він являється дочорнимо для елементу E.

Приклад

HTML 4.0  CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">
    <title>Дочірні селекторы</title>
    <style type="text/css">
      UL#menu {
        margin: 0; padding: 0; /* Прибираємо відступи */
      }
      UL#menu > LI {
        list - style: none; /* Прибираємо маркери списку */
        width: 100px; /* Ширина елементу в пікселах */
        background: #b3d9d2; /* Колір фону */
        color: #333; /* Колір тексту */
        padding: 5px; /* Полів навколо тексту */
        font - family: Arial, sans - serif; /* Рубаний шрифт */
        font - size: 90%; /* Розмір шрифту */
        font - weight: bold; /* Жирне зображення */
        float: left; /* Розташовуємо елементи по горизонталі */
      }
      LI > UL {
        list - style: none; /* Прибираємо маркери списку */
        margin: 0; padding: 0; /* Прибираємо відступи навколо елементів списку */
        border - bottom: 1px solid #666; /* Межа внизу */
        padding - top: 5px; /* Додаємо відступ згори */
      }
      LI > A {
        display: block; /* Посилань відображаються у вигляді блоку */
        font - weight: normal; /* Нормальне зображення тексту */
        font - size: 90%; /* Розмір шрифту */
        background: #fff; /* Колір фону */
        border: 1px solid #666; /* Параметрів рамки */
        border - bottom: none; /* Прибираємо межу знизу */
        padding: 5px; /* Полів навколо тексту */
      }
    </style>
  </head>
  <body>
    <ul id="menu"> 
      <li>Правка 
        <ul> 
            <li><a href="undo.html">Відмінити</a></li> 
            <li><a href="cut.html">Вирізувати</a></li> 
            <li><a href="copy.html">Копіювати</a></li> 
            <li><a href="paste.html">Вставити</a></li> 
        </ul> 
      </li> 
      <li>Зображення
        <ul> 
            <li><a href="bold.html">Жирне</a></li> 
            <li><a href="italic.html">Курсивне</a></li> 
            <li><a href="underline.html">Підкреслене</a></li> 
        </ul> 
      </li>
      <li>Розмір
        <ul> 
            <li><a href="small.html">Маленький</a></li> 
            <li><a href="normal.html">Нормальний</a></li> 
            <li><a href="middle.html">Середній</a></li> 
            <li><a href="big.html">Великий</a></li> 
        </ul> 
      </li> 
    </ul>
  </body>
</html>

У цьому прикладі дочірні селекторы потрібно, щоб розділити стиль елементів списку верхнього рівня і вкладені списки, які виконують різні завдання, тому стиль для них не повинен перетинатися. Результат прикладу показаний на мал. 2.

Мал. 2. Використання дочірніх селекторів

Браузери

Браузер Internet Explorer 7 не застосовує стиль, якщо між селекторами розташовується коментар (LI > /* більше */ A).